<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="The JointJS Flowchart demo serves as a template to help bring your idea to life in no time.">

        <title>Flowchart | JointJS</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <script src="../../build/joint.js"></script>
        <div class="font-loader" style="visibility: hidden">
            <div style="font-family: PPFraktionSans, sans-serif; font-weight: 300; font-style: normal;">Regular</div>
            <div style="font-family: PPFraktionSans, sans-serif; font-weight: 300; font-style: italic;">Regular Italic</div>
            <div style="font-family: PPFraktionSans, sans-serif; font-weight: 600; font-style: normal;">Bold</div>
        </div>
        <div id="canvas"></div>
        <div class="theme-switch" title="Switch between light and dark mode">
        <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="none" stroke="#dde6ed" stroke-linecap="round" stroke-linejoin="round" class="light-icon">
            <path d="M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z" stroke-width="1.5" />
            <path d="M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z" stroke-width="2" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="#131e29" class="dark-icon">
            <path d="M12.0557 3.59974C12.2752 3.2813 12.2913 2.86484 12.0972 2.53033C11.9031 2.19582 11.5335 2.00324 11.1481 2.03579C6.02351 2.46868 2 6.76392 2 12C2 17.5228 6.47715 22 12 22C17.236 22 21.5313 17.9764 21.9642 12.8518C21.9967 12.4664 21.8041 12.0968 21.4696 11.9027C21.1351 11.7086 20.7187 11.7248 20.4002 11.9443C19.4341 12.6102 18.2641 13 17 13C13.6863 13 11 10.3137 11 6.99996C11 5.73589 11.3898 4.56587 12.0557 3.59974Z" />
        </svg>
            <div class="switch"></div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>
